<template>
    <Wrapper :labelWidth="labelWidth" :isTpl="isTpl">
        <div class="flex-box border">
            <div v-if="hasLogo" class="flex-row m noBorder">
                <img v-if="!isTpl && logoPath" class="logo-img" :src="getFullPath(logoPath)" />
                <span v-else class="logo">logo</span>
            </div>
            <div class="flex-row l noBorder" style="padding:var(--sPadding);">
                <div v-if="isTpl" class="code-img"><img :src="CodeImg" /></div>
                <SVGBarCode v-else :info="info" :labelWidth="labelWidth" @passCode="value=>$emit('passCode', value)" />
            </div>
            <div v-if="hasName" class="flex-row s noBorder">
                {{  info.targetName || 'IC 贵重仓库'  }}
            </div>
            <div v-if="hasCode" class="flex-row s noBorder">
                {{ info.checkCode || '20241232414' }}
            </div>
            <div v-if="hasPos" class="flex-row s noBorder">
                {{ info.attrName || 'A 栋IC贵重仓库' }}
            </div>
        </div>
    </Wrapper>
</template>

<script setup>
    import { ref, onMounted, nextTick } from 'vue';
    import Wrapper from './Wrapper.vue';
    import CodeImg from '@/assets/barCodeTpl.png';
    import { getFullPath } from '@/api/tpl.js';
    import SVGBarCode from './barCodeSVG.vue';
    const props = defineProps({
        hasName:{ type:Boolean, default:true },
        hasCode:{ type:Boolean, default:true },
        hasLogo:{ type:Boolean, default:true },
        hasPos:{ type:Boolean, default:true },
        isTpl:{ type:Boolean },
        logoPath:{ type:String },
        info:{ type:Object, default:{} },
        labelWidth:{ type:Number }
    })
    const emit = defineEmits(['passCode']);
    
</script>
